import React, { useState } from 'react';
import { connect } from 'umi';
import { Modal, Tag } from 'antd';
import { Column } from '@ant-design/charts';
import { Tabs, Space } from 'antd';
import { useEffect } from 'react';
const TagSet = (props) => {
  const { id, filterSelect, onSelect, dispatch, selectList } = props;
  const [list, setList] = useState([]);
  const fetchData = () => {
    dispatch({
      type: 'behaviorEecord/fetchListTag',
      payload: {
        groupId: id,
      },
      callback: (e = []) => {
        setList(e);
      },
    });
  };
  useEffect(() => {
    if (id) {
      fetchData();
    }
  }, [id]);
  return (
    <Space wrap={true}>
      {list.map((item, index) => {
        const { tagName, id } = item;
        return (
          <Tag
            style={
              filterSelect(id)
                ? { fontSize: 14, border: '1px solid #1890ff', color: '#1890ff', cursor: 'pointer' }
                : { cursor: 'pointer' }
            }
            onClick={() => onSelect(item)}
            key={index}
          >
            {tagName}
          </Tag>
        );
      })}
    </Space>
  );
};

export default connect(({ user, loading }) => ({
  loading: loading.models.behaviorEecord,
}))(TagSet);
